<template>
  <BackTab>
    <template v-slot:center>志愿者信息管理中心___</template>
    <template v-slot:icon
      ><el-icon><UserFilled /></el-icon
    ></template>
    <template v-slot:list>志愿者列表</template>
  </BackTab>

  <el-card class="box-card">
    <div class="common-layout">
      <el-container>
        <el-header>
          <div class="search">
            <div class="name">用户名:</div>
            <el-input
              v-model="input"
              placeholder="输入搜索姓名"
              :suffix-icon="Search"
            />
            <el-button type="primary" class="seaBtn" @click="searchVol"
              >搜索</el-button
            >
            <el-button type="primary" @click="getVol">全部用户</el-button>
          </div>
          <div class="btnBox">
            <el-button type="primary" @click="addVisible = true">添加用户</el-button>
          </div>
        </el-header>
        <el-main>
          <el-table :data="volList" stripe border style="width: 100%">
            <el-table-column type="index" label="~" />
            <el-table-column prop="v_name" label="姓名" width="100" />
            <el-table-column prop="v_sex" label="性别" width="80" />
            <el-table-column prop="v_birthday" label="出生日期">
              <template #default="scope">
                {{ utils.ymd(scope.row.v_birthday) }}
              </template>
            </el-table-column>
            <el-table-column prop="v_phone" label="手机号" />
            <el-table-column prop="v_addr" label="居住地" />
            <el-table-column prop="v_politic" label="政治面貌" />
            <el-table-column prop="v_works" label="职业" />
            <el-table-column prop="v_line" label="在线时长/h" width="100" />
            <el-table-column prop="v_serve" label="服务时长/h" width="100" />
            <el-table-column label="操作" width="200px">
              <template #default="scope">
                <el-button
                  size="small"
                  type="info"
                  @click="detailsVol(scope.row.id)"
                  >详情</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  @click="editVol(scope.row.id)"
                  >修改</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="deleteVol(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="page">
            <el-pagination
              layout="total,prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-main>
      </el-container>
    </div>
  </el-card>

  <!-- 详情 -->
  <el-dialog
    v-model="deltailVisible"
    title="用户详情"
    class="detail"
    width="30%"
  >
    <div class="detailInfos">
      <div class="bottom">
        <div class="item">
          <div class="label">姓名：</div>
          <div class="data">{{ volDeatilInfos.v_name }}</div>
        </div>
        <div class="item">
          <div class="label">性别：</div>
          <div class="data">{{ volDeatilInfos.v_sex }}</div>
        </div>
        <div class="item">
          <div class="label">年龄：</div>
          <div class="data">{{ age }}</div>
        </div>
        <div class="item">
          <div class="label">手机号：</div>
          <div class="data">{{ volDeatilInfos.v_phone }}</div>
        </div>
        <div class="item">
          <div class="label">微信：</div>
          <div class="data">{{ volDeatilInfos.v_wechat }}</div>
        </div>
        <div class="item">
          <div class="label">政治面貌：</div>
          <div class="data">{{ volDeatilInfos.v_politic }}</div>
        </div>
        <div class="item">
          <div class="label">身份证号码：</div>
          <div class="data">{{ volDeatilInfos.v_cardId }}</div>
        </div>
        <div class="item">
          <div class="label">职业：</div>
          <div class="data">{{ volDeatilInfos.v_works }}</div>
        </div>
        <div class="item">
          <div class="label">在线时长：</div>
          <div class="data">{{ volDeatilInfos.v_line }}</div>
        </div>
        <div class="item">
          <div class="label">服务时长：</div>
          <div class="data">{{ volDeatilInfos.v_serve }}</div>
        </div>
        <div class="item">
          <div class="label">爱好：</div>
          <div class="data">{{ volDeatilInfos.v_hobbies }}</div>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deltailVisible = false" type="primary"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
  <!-- 修改 -->
  <el-dialog v-model="editVisible" title="用户信息" width="30%" center>
    <el-form
      :model="volDeatilInfos"
      :rules="volunRules"
      ref="volunRef"
      label-width="120px"
    >
      <el-form-item label="姓名" prop="v_name">
        <el-input v-model="volDeatilInfos.v_name" />
      </el-form-item>
      <el-form-item label="手机号" prop="v_phone">
        <el-input v-model="volDeatilInfos.v_phone" />
      </el-form-item>
      <el-form-item label="居住地" prop="v_addr">
        <el-input v-model="volDeatilInfos.v_addr" />
      </el-form-item>
      <el-form-item label="政治面貌" prop="v_politic">
        <el-input v-model="volDeatilInfos.v_politic" />
      </el-form-item>
      <el-form-item label="职业" prop="v_works">
        <el-input v-model="volDeatilInfos.v_works" />
      </el-form-item>
      <el-form-item label="在线时长" prop="v_line">
        <el-input v-model="volDeatilInfos.v_line" />
      </el-form-item>
      <el-form-item label="服务时长" prop="v_serve">
        <el-input v-model="volDeatilInfos.v_serve" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editVisible = false">取消</el-button>
        <el-button type="primary" @click="submitUpdate(volunRef)"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>

  <!-- 添加 -->
  <el-dialog v-model="addVisible" title="用户信息" width="50%" center>
    <VolunteerVue @on-volun="closeAddVisible"></VolunteerVue>
  </el-dialog>
</template>

<script lang="ts" setup>
import BackTab from "@/components/common/tabbar/BackTab.vue";
import { Search } from "@element-plus/icons-vue";
import {
  getVolList,
  query,
  getSearchVol,
  getDeleteVol,
  getDetailVol,
  getAllVoluns
} from "@/server/volunteer";
import { getCurrentInstance, onMounted, ref } from "vue";
import utils from "@/utils/utils";
import { ElMessage, type FormInstance } from "element-plus";
import VolunteerVue from "@/components/common/RgisterTable/Volunteer.vue";
import { useVolRegist } from "@/hooks/loginForm/volunRegist";
const { volunRef, volunForm, volunRules } = useVolRegist();
const { proxy }: any = getCurrentInstance();

const volList = ref<any>([]);
const total = ref(0);
const input = ref("");
const age = ref(0);
const volDeatilInfos = ref<any>([]);
const deltailVisible = ref(false);
const editVisible = ref(false);
const addVisible = ref(false)
const vid = ref(0);
const noPass = ref<any>([])

onMounted(async () => {
  await getVoluntteer();
});

function getVoluntteer() {
  getVolList().then((res1: any) => {
    volList.value = res1.data.filter((item:any) => item.state == 1);
    getAllVoluns().then((res2:any) => {
      noPass.value = res2.data.filter((item:any) => item.state != 1)
      total.value = res1.total - noPass.value.length
    })
  });
}
function getDetailInfos(id: number) {
  getDetailVol(id).then((res: any) => {
    volDeatilInfos.value = res.data;
    age.value = utils.fillAge(JSON.stringify(res.data.v_birthday));
  });
}

const handleCurrentChange = (newPage: number) => {
  query.pageNum = newPage;
  getVolList().then((res: any) => {
    volList.value = res.data;
  });
};
const searchVol = () => {
  getSearchVol(input.value).then((res: any) => {
    volList.value = res.data;
  });
};

const getVol = async () => {
  await getVoluntteer();
  input.value = "";
};

const closeAddVisible =async () => {
  addVisible.value = false
  await getVoluntteer();
}

const detailsVol = async (id: number) => {
  deltailVisible.value = true;
  await getDetailInfos(id);
};

const editVol = async (id: number) => {
  editVisible.value = true;
  vid.value = id;
  await getDetailInfos(id);
};

const submitUpdate = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (!valid) return;
    proxy.$http
      .post("/volunteer/update/" + vid.value, {
        v_phone: volDeatilInfos.value.v_phone,
        v_name: volDeatilInfos.value.v_name,
        v_addr: volDeatilInfos.value.v_addr,
        v_politic: volDeatilInfos.value.v_politic,
        v_works: volDeatilInfos.value.v_works,
        v_line: volDeatilInfos.value.v_line,
        v_serve: volDeatilInfos.value.v_serve,
      })
      .then(async (res: any) => {
        ElMessage.success(res.message);
        editVisible.value = false;
        await getVoluntteer();
      });
  });
};

const deleteVol = (id: number) => {
  getDeleteVol(id).then(async (res: any) => {
    ElMessage.success(res.message);
    await getVoluntteer();
  });
};
</script>

<style lang="less" scoped>
.common-layout {
  padding: 0;
  .el-container {
    .el-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // background-color: pink;
      border: 1px solid #ebeef5;
      padding: 10px;
      .search {
        display: flex;
        align-items: center;
        .name {
          width: 100px;
          font-weight: bolder;
        }
        .seaBtn {
          margin-left: 5px;
        }
      }
    }
    .el-main {
      padding: 0;
      .page {
        padding-top: 10px;
        display: flex;
        justify-content: end;
      }
    }
  }
}

.detail {
  .detailInfos {
    display: flex;
    flex-direction: column;
    .bottom {
      margin-top: 15px;
      .item {
        display: flex;
        margin-bottom: 8px;
        .label {
          font-weight: bolder;
          padding-right: 8px;
        }
      }
    }
  }
}
</style>
